{if($msg==1)}
<link href="./css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" charset="utf-8" src="/inc/Editer/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/inc/Editer/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="/inc/Editer/lang/zh-cn/zh-cn.js"></script>
<div class="main" style="height:auto;">
<div class="info">
	<p class="tt"><a>首页</a>><a href="newslist.php">资讯管理</a>><span>编辑信息</span></p>
	<form class="infoedit">
		<input type="hidden" value="{$nid}" name="nid" />
		<p class="p1"><span>标题</span><input type="text" name="title" value="{$info[title]}" /></p>
		<p><span>栏目</span><select class='menu2' name='menu2'>
			<option value='0'>--选择栏目--</option>
			{loop $menu $key as $list}
			<option {if($list['Id']==$info['cid'])} selected {/if} value="{$list[Id]}">{$list[name]}</option>
			{/loop}
		</select></p>
		<div id='tab3' class='hide uppic' style="margin-bottom:20px;">
			<span>缩略图</span>
			<?php if($pic){?>
			<?php for($i=0;$i<count($pic);$i++){
				if($pic[$i]){?>
			<div class="gerenUpload" style="width:120px; height:105px; border:1px solid #ddd;position: relative; margin-right:20px;">
				<input type="file" id="upload" name="" data-name="<?php echo $i+1;?>" class="sc" />
				<input type="hidden" id="img<?php echo $i+1;?>" name="img[]" value="<?php echo $pic[$i];?>" />
				<img src="<?php echo $pic[$i];?>" alt="" id="moren<?php echo $i+1;?>">
				<a class='del' style='cursor:pointer; position:absolute; z-index:999; top:0; right:0; width:20px; height:20px; line-height:20px; text-align:center; border-left:1px solid #ddd; border-bottom:1px solid #ddd;background:red; color:#fff; '>X</a>
			</div>
			<?php }else{?>
			<div class="gerenUpload" style="width:120px; height:105px; border:1px solid #ddd;position: relative; margin-right:20px;">
				<input type="file" id="upload" name="" data-name="1" class="sc" />
				<input type="hidden" id="img1" name="img[]" />
				<img src="/skin/img/mr.png" alt="" id="moren1">
				<a class='del' style='cursor:pointer; position:absolute; z-index:999; top:0; right:0; width:20px; height:20px; line-height:20px; text-align:center; border-left:1px solid #ddd; border-bottom:1px solid #ddd;background:red; color:#fff; '>X</a>
			</div>
			<?php }}}else{?>
			<div class="gerenUpload" style="width:120px; height:105px; border:1px solid #ddd;position: relative; margin-right:20px;">
				<input type="file" id="upload" name="" data-name="1" class="sc" />
				<input type="hidden" id="img1" name="img[]" />
				<img src="/skin/img/mr.png" alt="" id="moren1">
				<a class='del' style='cursor:pointer; position:absolute; z-index:999; top:0; right:0; width:20px; height:20px; line-height:20px; text-align:center; border-left:1px solid #ddd; border-bottom:1px solid #ddd;background:red; color:#fff; '>X</a>
			</div>
			<?php }?>
			<?php if($pic && count($pic)>=9){?>
			<div class="gerenUploadMore" style='display:none;'>

			</div>
			<?php }else{?>
			<div class="gerenUploadMore">

			</div>
			<?php }?>
		</div>
		<div class="p2"><span class="sx">内容</span><textarea name="content" style="width:400px; box-sizing:border-box; height:100px; margin:0 auto; padding:5px; line-height:24px; font-size:14px; border:1px solid #ddd;" placeholder="请输入分享文字 100字以内">{$info[content]}</textarea></div>	
		
		<button type="button" onclick="infoedit();">立即修改</button>
	</form>
	<script src="./js/jquery.js"></script>
	<script>
				 
		function infoedit(){
			$.ajax({
				type:"post",
				dataType:"json",
				url:"/Moudel.php?m=n&a=newsedit",
				data:$(".infoedit").serialize(),
				success:function(d){
					if(d[0]==0){
						alert(d[1]);
					}
					else{
						alert(d[1]);
						window.location.href='newslist.php';
					}
				}
			});
		}
		
		$(".uppic").delegate(".del","click",function (e) {
			$(this).parent().remove();
			$(".gerenUploadMore").show();
		});
		$(".gerenUploadMore").click(function () {
			let i = $(".gerenUpload").length + 1;
			$(this).before(`<div class="gerenUpload" style="width:120px; height:105px; border:1px solid #ddd;position: relative; margin-right:20px;">
		\t\t\t\t\t<input type="file" id="upload" name="" data-name="${i}" class="sc" />
		\t\t\t\t\t<input type="hidden" id="img${i}" name="img[]" />
		\t\t\t\t\t<img src="/skin/img/mr.png" alt="" id="moren${i}">
		\t\t\t\t\t<a class='del' style='cursor:pointer; position:absolute; z-index:999; top:0; right:0; width:20px; height:20px; line-height:20px; text-align:center; border-left:1px solid #ddd; border-bottom:1px solid #ddd;background:red; color:#fff; '>X</a>
		\t\t\t\t</div>`)
			if (i == 9) {
				$(this).hide();
			}
		});
		const ACCEPT = ['image/jpg', 'image/png', 'image/jpeg'];
    const MAXSIZE = 1024 * 1024 * 2;
    const MAXSIZE_STR = '2MB';

    function convertImageToBase64(file,callback) {
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.addEventListener('load', function(e){
        const base64Image = e.target.result;
        callback && callback(base64Image);
        reader = null;
      })
    }
    // 图片压缩
    function compress(base64Image,callback){
      let maxW = 640;
      let maxH = 640;
      const image = new Image();
      image.addEventListener('load', function(e){
        let ratio; //图片的压缩比
        let needCompress = false; // 是否需要压缩
        if(maxW < image.naturalWidth) {
          needCompress = true;
          ratio = image.naturalWidth / maxW;
          maxH = image.naturalHeight / ratio;
        }
        //经过处理后，实际图片的尺寸为1024 * 640;
        if(maxH < image.naturalHeight) {
          needCompress = true;
          ratio = image.naturalHeight / maxH;
          maxW = image.naturalWidth / ratio;
        }
        if(!compress) {
          maxW = image.naturalWidth;
          maxH = image.naturalHeight;
        }//如果不需要压缩，需要获取图片的实际尺寸

        const canvas = document.createElement('canvas');
        canvas.setAttribute('id','__compress__');
        canvas.width = maxW;
        canvas.height = maxH;
        canvas.style.visibility = 'hidden';
        // document.body.appendChild(canvas);

        const ctx = canvas.getContext('2d');
        ctx.clearRect(0,0,maxW,maxH);
        ctx.drawImage(image, 0, 0, maxW, maxH);
        // toDataURL的第二个参数表示图片质量，取值为0-1 1为原图
        const compressImage = canvas.toDataURL('image/jpeg', 0.5);
        callback && callback(compressImage);

        //在页面上展示压缩后的图片
      });
      image.src = base64Image;
      // document.body.appendChild(image);

    }
    //获得压缩后的base64
    function uploadToServer(compressImage) {
      //这里调用上传图片base64编码的接口
      compressImage = encodeURIComponent(compressImage);
      $.ajax({
        type:"post",
        dataType:"json",
        url:"/Moudel.php?m=g&a=upload",
        data:"img="+compressImage,
        success:function(d){
          if(d[0]==0){
            alert(d[1]);
          }
          else{           
			pare.children("input[type=hidden]").attr('value',d[1]);
			pare.children("img").attr('src',d[1]);
          }
        }
      });
    }

    const upload = document.getElementById('upload');
	var uploadS = document.getElementsByClassName("sc");

	$(".uppic").delegate(".sc","click",function (e) {
		var changeExed = false;
		pare = $(this).parent(".gerenUpload");
		
		$(this).change(function (e) {
			if (!changeExed) {
				changeExed = true;
				type = 1;
				const [file] = e.target.files;
				if(!file) {
					return;
				}
				const { type: fileType, size: fileSize } = file;
				//图片支持类型检查
				if(!ACCEPT.includes(fileType)) {
					alert(`不支持[${fileType}]文件类型!`);
					upload.value = '';
					return;
				}
				//图片容量检查
				if(fileSize > MAXSIZE) {
					alert(`文件大小超出${MAXSIZE_STR}!`);
					upload.value = '';
					return;
				}
				//压缩图片
				
				convertImageToBase64(file, (base64Image) => compress(base64Image,uploadToServer));
			}
		});
	});
	</script>
	
</div>
</div>
{else}
<link href="./css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" charset="utf-8" src="/inc/Editer/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/inc/Editer/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="/inc/Editer/lang/zh-cn/zh-cn.js"></script>
<div class="main" style="height:auto;">
<div class="info">
	<p class="tt"><a>首页</a>><a href="newslist.php">公告管理</a>><span>添加公告</span></p>
	<form class="infoadd">
		<p class="p1"><span>标题</span><input type="text" name="title" placeholder="" /></p>
		<p><span>栏目</span>
			<select class='menu2' name='menu2'>
				<option value='0'>--选择栏目--</option>
				{loop $menu $key as $list}
				<option value="{$list[Id]}">{$list[name]}</option>
				{/loop}
			</select></p>
			<div id='tab3' class='hide uppic' style="margin-bottom:20px;">	
				<span>缩略图</span>
				<div class="gerenUpload" style="width:120px; height:105px; border:1px solid #ddd;position: relative; margin-right:20px;">
					<input type="file" id="upload" name="" data-name="1" class="sc" />
					<input type="hidden" id="img1" name="img[]" />
					<img src="/skin/img/mr.png" alt="" id="moren1">
					<a class='del' style='cursor:pointer; position:absolute; z-index:999; top:0; right:0; width:20px; height:20px; line-height:20px; text-align:center; border-left:1px solid #ddd; border-bottom:1px solid #ddd;background:red; color:#fff; '>X</a>
				</div>		
				<div class="gerenUploadMore"  >
	
				</div>
				<div style="clear:both;"></div>		
			</div>
		<div class="p2"><span class="sx">内容</span><textarea name="content" style="width:400px; box-sizing:border-box; height:100px; margin:0 auto; padding:5px; line-height:24px; font-size:14px; border:1px solid #ddd;" placeholder="请输入分享文字 100字以内"></textarea></div>		
		<button type="button" onclick="infoadd();">确认添加</button>
	</form>
	<script src="./js/jquery.js"></script>
	<script>
		
		function infoadd(){
				$.ajax({
					type:"post",
					dataType:"json",
					url:"/Moudel.php?m=n&a=newsadd",
					data:$(".infoadd").serialize(),
					success:function(d){
						if(d[0]==0){
							alert(d[1]);
						}
						else{
							alert(d[1]);
							window.location.href='newslist.php';
						}
					}
				});
			}
			$(".uppic").delegate(".del","click",function (e) {
			$(this).parent().remove();
			$(".gerenUploadMore").show();
		});
		$(".gerenUploadMore").click(function () {
			let i = $(".gerenUpload").length + 1;
			$(this).before(`<div class="gerenUpload" style="width:120px; height:105px; border:1px solid #ddd;position: relative; margin-right:20px;">
		\t\t\t\t\t<input type="file" id="upload" name="" data-name="${i}" class="sc" />
		\t\t\t\t\t<input type="hidden" id="img${i}" name="img[]" />
		\t\t\t\t\t<img src="/skin/img/mr.png" alt="" id="moren${i}">
		\t\t\t\t\t<a class='del' style='cursor:pointer; position:absolute; z-index:999; top:0; right:0; width:20px; height:20px; line-height:20px; text-align:center; border-left:1px solid #ddd; border-bottom:1px solid #ddd;background:red; color:#fff; '>X</a>
		\t\t\t\t</div>`)
			if (i == 9) {
				$(this).hide();
			}
		});
		const ACCEPT = ['image/jpg', 'image/png', 'image/jpeg'];
    const MAXSIZE = 1024 * 1024 * 2;
    const MAXSIZE_STR = '2MB';

    function convertImageToBase64(file,callback) {
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.addEventListener('load', function(e){
        const base64Image = e.target.result;
        callback && callback(base64Image);
        reader = null;
      })
    }
    // 图片压缩
    function compress(base64Image,callback){
      let maxW = 640;
      let maxH = 640;
      const image = new Image();
      image.addEventListener('load', function(e){
        let ratio; //图片的压缩比
        let needCompress = false; // 是否需要压缩
        if(maxW < image.naturalWidth) {
          needCompress = true;
          ratio = image.naturalWidth / maxW;
          maxH = image.naturalHeight / ratio;
        }
        //经过处理后，实际图片的尺寸为1024 * 640;
        if(maxH < image.naturalHeight) {
          needCompress = true;
          ratio = image.naturalHeight / maxH;
          maxW = image.naturalWidth / ratio;
        }
        if(!compress) {
          maxW = image.naturalWidth;
          maxH = image.naturalHeight;
        }//如果不需要压缩，需要获取图片的实际尺寸

        const canvas = document.createElement('canvas');
        canvas.setAttribute('id','__compress__');
        canvas.width = maxW;
        canvas.height = maxH;
        canvas.style.visibility = 'hidden';
        // document.body.appendChild(canvas);

        const ctx = canvas.getContext('2d');
        ctx.clearRect(0,0,maxW,maxH);
        ctx.drawImage(image, 0, 0, maxW, maxH);
        // toDataURL的第二个参数表示图片质量，取值为0-1 1为原图
        const compressImage = canvas.toDataURL('image/jpeg', 0.5);
        callback && callback(compressImage);

        //在页面上展示压缩后的图片
      });
      image.src = base64Image;
      // document.body.appendChild(image);

    }
    //获得压缩后的base64
    function uploadToServer(compressImage) {
      //这里调用上传图片base64编码的接口
      compressImage = encodeURIComponent(compressImage);
      $.ajax({
        type:"post",
        dataType:"json",
        url:"/Moudel.php?m=g&a=upload",
        data:"img="+compressImage,
        success:function(d){
          if(d[0]==0){
            alert(d[1]);
          }
          else{           
			pare.children("input[type=hidden]").attr('value',d[1]);
			pare.children("img").attr('src',d[1]);
          }
        }
      });
    }

    const upload = document.getElementById('upload');
	var uploadS = document.getElementsByClassName("sc");

	$(".uppic").delegate(".sc","click",function (e) {
		var changeExed = false;
		pare = $(this).parent(".gerenUpload");
		
		$(this).change(function (e) {
			if (!changeExed) {
				changeExed = true;
				type = 1;
				const [file] = e.target.files;
				if(!file) {
					return;
				}
				const { type: fileType, size: fileSize } = file;
				//图片支持类型检查
				if(!ACCEPT.includes(fileType)) {
					alert(`不支持[${fileType}]文件类型!`);
					upload.value = '';
					return;
				}
				//图片容量检查
				if(fileSize > MAXSIZE) {
					alert(`文件大小超出${MAXSIZE_STR}!`);
					upload.value = '';
					return;
				}
				//压缩图片
				
				convertImageToBase64(file, (base64Image) => compress(base64Image,uploadToServer));
			}
		});
	});
	</script>
	
</div>
</div>
{/if}